import {Directive, OnChanges, HostListener} from '@angular/core';
import {Input} from "@angular/core/src/metadata/directives";
import * as $ from 'jquery';
@Directive({
  selector: '[iotekTooltip]'
})
export class TooltipDirective {
  constructor() {
  }

  @Input("iotekTooltip")
  public iotekTooltip: string;
  private tooltipElement: any;

  @HostListener('mouseover', ['$event'])
  private mouseOver($event) {
    var paddingLeftRight = 20;
    var paddingTopBottom = 10;
    this.tooltipElement = $(`<div>${this.iotekTooltip}</div>`).css({
      'padding': `${paddingTopBottom}px ${paddingLeftRight}px`,
      'background-color': '#000',
      'color': '#fff',
      'border-radius': '5px',
      'visibility': 'hidden',
      'position': 'fixed'
    });
    $('body').append(this.tooltipElement);
    var width = this.tooltipElement.width();
    var height = this.tooltipElement.height();
    var left = $event.clientX > $(window).width() / 2 ? ($event.clientX - (width + 2 * paddingLeftRight + 20)) : $event.clientX + 20;
    var top = $event.clientY > $(window).height() / 2 ? ($event.clientY - (height + 2 * paddingTopBottom + 20)) : $event.clientY + 20;
    setTimeout(() => {
      this.tooltipElement.css({
        top: `${top}px`,
        left: `${left}px`,
        visibility: 'visible'
      });
    }, 1000);
  }

  @HostListener('mouseleave', ['$event'])
  private mouseLeave($event) {
    this.tooltipElement.remove();
  }

}
